import { reactive, computed } from 'vue'
import { defineStore } from 'pinia'
import { v4 as uuidv4 } from 'uuid'
import { textDefaultProps } from '@/constant'
import { type AllComponentProps } from '@/types/defaultProps'

export interface EditorProps {
  components: ComponentData[]
  currentElement: string
}

export interface ComponentData {
  props: Partial<AllComponentProps>
  id: string
  name: 'sc-text' | 'sc-image' | 'sc-shape'
  // 图层是否隐藏
  isHidden?: boolean
  // 图层是否锁定
  isLocked?: boolean
  // 图层名称
  layerName?: string
}

export interface UpdateComponentData {
  key: keyof AllComponentProps | Array<keyof AllComponentProps>
  value: string | string[]
  id: string
  isRoot?: boolean
}

// export const useEditorStore = defineStore('editor', () => {
//   const count = ref(0)
//   const doubleCount = computed(() => count.value * 2)
//   function increment() {
//     count.value++
//   }

//   return { count, doubleCount, increment }
// })

export const testComponents: ComponentData[] = [
  {
    id: uuidv4(),
    name: 'sc-text',
    props: {
      ...textDefaultProps,
      text: 'namenamenamenamenamename',
      color: 'green',
      actionType: 'url',
      url: 'https://www.baidu.com'
    }
  },
  {
    id: uuidv4(),
    name: 'sc-text',
    props: { ...textDefaultProps, text: 'hello2', fontSize: '30px', color: '#fa541c' }
  },
  {
    id: uuidv4(),
    name: 'sc-text',
    props: { ...textDefaultProps, text: 'hello3', fontSize: '40px', borderColor: 'red' }
  }
]

export const useEditorStore = defineStore('editor', () => {
  const state = reactive<EditorProps>({
    components: testComponents,
    currentElement: ''
  })
  const addComponent = (props: ComponentData) => {
    state.components.push(props)
  }
  const getCurrentElement = computed(() => {
    return state.components.find((component) => component.id === state.currentElement)
  })
  const setActive = (id: string) => {
    state.currentElement = id
  }

  const updateComponent = ({ key, value, id, isRoot }: UpdateComponentData) => {
    const updatedComponent = state.components.find(
      (component) => component.id === (id || state.currentElement)
    )
    if (updatedComponent) {
      if (isRoot) {
        ;(updatedComponent as any)[key as string] = value
      } else {
        const oldValue = Array.isArray(key)
          ? key.map((key) => updatedComponent.props[key])
          : updatedComponent.props[key]
        // if (!state.cachedOldValues) {
        //   state.cachedOldValues = oldValue
        // }
        // // updatedComponent.props[key as keyof AllComponentProps];
        // pushHistoryDebounce(state, { key, value, id })
        // 节流存储，防止存入多条记录
        // state.histories.push({
        //   id: uuidv4(),
        //   componentId: id || state.currentElement,
        //   type: "modify",
        //   data: {
        //     oldValue,
        //     newValue: value,
        //     key,
        //   },
        // });
        // 节流存储，防止存入多条记录
        // 开始修改值
        if (Array.isArray(key) && Array.isArray(value)) {
          key.forEach((keyName, index) => {
            updatedComponent.props[keyName] = value[index]
          })
        } else if (typeof key === 'string' && typeof value === 'string') {
          console.log('输出法的这里吗？？？')
          updatedComponent.props[key] = value
        }
      }
    }
  }

  return { state, addComponent, setActive, getCurrentElement, updateComponent }
})
